<!-- 账号管理 -->
<template>
  <div class="tob">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="信息搜索:" prop="condition">
        <el-input
          v-model="condition"
          class="input"
          placeholder="请输入角色名"
        />
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="success" size="mini" @click="handleAdd">新增账号</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="singleTable"
      :data="formData"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="250" />
      <el-table-column property="nickname" label="用户名" width="250" />
      <el-table-column property="email" label="用户邮箱" width="250" />
      <el-table-column property="mobile" label="手机号" width="250" />
      <el-table-column property="password" label="用户密码" width="250" />
      <el-table-column property="operation" label="操作">
        <template slot-scope="scope">
          <el-button type="info" @click="handleUpdate(scope.row.id)">编辑</el-button>
          <el-button type="warning" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template>
      <div class="block" style="text-align: center; margin-top: 20px;">
        <el-pagination
          :page-size="pageParams.pageSize"
          :current-page="pageParams.currentPage"
          :total="pageParams.resultCount"
          :page-sizes="[10, 20, 30, 40]"
          layout="total,prev, pager, next,jumper"
          @current-change="handleCurrentChange"
        />
      </div>
    </template>
    <!-- 账号管理弹窗 -->
    <el-dialog width="500px" :title="title" :visible.sync="open" @close="closeDialog">
      <el-form
        ref="formList"
        label-width="120px"
        :rules="rules"
        :model="formList"
      >
        <el-form-item label="用户名" prop="nickname">
          <el-input
            v-model="formList.nickname"
            size="small"
            placeholder="请输入用户名"
          />
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input
            v-model="formList.email"
            size="small"
            placeholder="请输入用户邮箱"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="formList.mobile"
            size="small"
            placeholder="请输入用户手机号"
          />
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input
            v-model="formList.password"
            size="small"
            placeholder="请输入用户密码"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="submitForm"
          >确定</el-button>
          <el-button size="mini" @click="reset">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import crypto from 'crypto'
import {
  listRoleAXIOS,
  addRole,
  getRole,
  updateRole,
  deleteRole
} from '@/api/business/management'
//  引入子组件
export default {
  data() {
    return {
      // 文本
      title: '新增账户',
      // 控制弹窗显示和隐藏
      open: false,
      formList: {},
      // 分页数据
      pageParams: {
        currentPage: 1,
        pageSize: 10,
        resultCount: 1
      },
      // 模糊查询功能
      condition: '',
      formData: [],
      rules: {
        nickname: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '用户邮箱不能为空', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: '请输入正确的邮箱地址',
            trigger: 'blur'
          }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不对',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '用户密码不能为空', trigger: 'blur' },
          {
            message: '密码长度应该为6-16位之间',
            trigger: 'blur'
          }
        ]
      },
      currentRow: null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 新增弹窗
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加账号'
    },
    // 数据渲染
    async getList() {
      try {
        const res = await listRoleAXIOS(
          this.condition,
          this.pageParams.currentPage,
          this.pageParams.pageSize
        )
        console.log(res)
        this.formData = res.data
        this.pageParams.currentPage = res.currentPage
        this.pageParams.pageSize = res.pageSize
        this.pageParams.resultCount = res.resultCount
      } catch (error) {
        console.error(error)
        // 处理错误，例如给用户提示错误信息
      }
    },
    // 分页变化时的处理函数
    handleCurrentChange(page) {
      this.pageParams.currentPage = page
      this.getList()
    },
    //   //确认按钮
    submitForm: function() {
      const md5 = crypto.createHash('md5')
      const password = md5.update(this.formList.password).digest('hex')
      console.log(password)
      this.formList.password = password
      this.$refs['formList'].validate((valid) => {
        if (valid) {
          if (this.formList.id) {
            // 确认编辑
            updateRole(this.formList).then((response) => {
              this.$message.success('修改账号成功')
              this.pageParams.currentPage = 1
              this.open = false // 关闭弹层
              this.getList() // 刷新页面数据
            })
          } else {
            // 新增账号逻辑
            addRole(this.formList).then((response) => {
              this.$message.success('新增账号成功')
              this.pageParams.currentPage = 1
              this.formList.id = '' // 重置id
              this.open = false // 关闭弹层
              this.getList() // 刷新页面数据
            })
          }
        }
      })
    },
    closeDialog() {
      // 关闭弹窗前重置表单验证状态
      this.$refs.formList.resetFields()
      this.open = false
      // 其他关闭弹窗的逻辑代码...
    },
    // 清空表单
    reset() {
      this.formList = {
        nickname: '',
        email: '',
        mobile: '',
        password: ''
        // 表单验证
      }
      this.open = false
    },
    // 重置
    resetQuery() {
      this.condition = ''
      this.handleQuery()
    },
    // 搜索功能
    handleQuery() {
      this.pageParams.currentPage = 1
      this.getList()
    },
    // 角色列表编辑功能弹窗
    async handleUpdate(id) {
      this.title = '修改账号'
      const res = await getRole(id)
      this.formList = res
      this.open = true
    },
    // 删除角色
    async handleDelete(id) {
      await deleteRole(id) // 后端删除
      this.$message.success('删除角色成功')
      this.pageParams.currentPage = 1
      this.getList()
    }
  }
}
</script>
